<route>
    {
        meta: {
            enabled: false
        }
    }
    </route>

<script setup>
import useUserGroupStore from '@/store/modules/userGroup'
import { ElMessageBox } from 'element-plus'

const groupStore = useUserGroupStore()
const items = ref([])
const pageSize = ref(10)
const pageNum = ref(1)
const total = ref(0)

const selectionDataList = ref([])
const searchMore = ref(false)
const currentPage4 = ref(1)
const dialogVisible = ref(false)

const search = ref({
    name: '',
    department_id: '',
    department_job_id: '',
    role_id: '',
    check1: true,
    check2: false
})
const dataList = ref([
    {
        id: 3,
        name: '普通用户',
        username: 'string',
        role: null,
        createTime: '2022-09-05T17:10:08'
    },
    {
        id: 1,
        name: '超级用户组',
        username: 'jgkj',
        role: 'ROLE_ADMIN',
        createTime: '2022-09-02T00:00:00'
    }
])

onMounted(() => {
    getList()
})

function getList() {
    pageNum.value = 1
    groupStore.getGroup().then(res => {
        dataList.value = res
        total.value = res.length
        items.value = dataList.value.slice((pageNum.value - 1) * pageSize.value, pageNum.value * pageSize.value )
    })

}

function handleDelete(id, index) {
    ElMessageBox.confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            groupStore.deleteGroup(id).then(() => {
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                getList()
            })
            dataList.value.splice(index, 1)
        })
        .catch(() => {
            // catch error
            ElMessage({
                type: 'info',
                message: '已取消'
            })
        })
}

function handleCurrentChange() {
}

function handleSizeChange() {
}
</script>

<template>
    <div>
        <page-header title="用户组管理">
            <template #content>
                <p>用户组管理</p>
            </template>
        </page-header>

        <page-main>
            <el-row style="margin-bottom: 20px;">
                <el-button type="primary">
                    <router-link :to="{name: 'groupExampleAdd'}">新增用户组</router-link>
                </el-button>
            </el-row>

            <el-table
                :data="items"
                row-key="id"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                default-expand-all
            >
                <el-table-column align="center" label="用户组编码" width="200" prop="id" />
                <el-table-column align="center" label="用户组名称" prop="name" />
                <!-- <el-table-column label="上级用户组名称（编码）">
                    <template
                        #default="scope"
                    >
                        {{ scope.row.bmwh1.pid==null?'':`${scope.row.bmwh2.name}(${ scope.row.bmwh2.code})` }}
                    </template>
                </el-table-column> -->
                <el-table-column prop="temp" label="操作" width="220">
                    <template #default="scope">
                        <el-button type="primary" link>
                            <router-link :to="{name: 'groupExampleEdit',query: {id: scope.row.id, name: scope.row.name, parentId: scope.row.parentId }}">修改</router-link>
                        </el-button>

                        <el-button
                            v-if="scope.row.id != 1" type="primary" link @click="handleDelete(scope.row.id,scope.$index)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="padding: 10px 0;">
                <!--内边距空一些-->
                <el-pagination
                    :current-page="currentPage4" :page-sizes="[5, 10, 15, 20]" :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
                <!--1.page-sizes一般设置为5，10，15，20-->
                <!--1.page-size一般设置为10，即每页10个-->
            </div>
        </page-main>
        <el-dialog
            v-model="dialogVisible"
            title="Tips"
            width="30%"
            :before-close="handleClose"
        >
            <span>This is a message</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style>
.test {
    width: 6px;
    height: 6px;
    background: #52c41a;
    border-radius: 10px;
    opacity: 1;
    margin: auto 5px;
}
a {
    text-decoration: none;
}
.router-link-active {
    text-decoration: none;
}
</style>
